import {defineStore} from 'pinia'
import {store} from '@/store'
import {humpToUnderline, setCssVar} from '@/utils'
import {ElMessage} from 'element-plus'
import {CACHE_KEY, useCache} from '@/hooks/web/useCache'
import {ElementPlusSize} from '@/types/elementPlus'
import {LayoutType} from '@/types/layout'
import {ThemeTypes} from '@/types/theme'

const {wsCache} = useCache()

interface AppState {
    breadcrumb: boolean
    collapse: boolean
    uniqueOpened: boolean
    hamburger: boolean
    screenfull: boolean
    size: boolean
    locale: boolean
    message: boolean
    tagsView: boolean
    logo: boolean
    fixedHeader: boolean
    greyMode: boolean
    pageLoading: boolean
    layout: LayoutType
    title: string
    userInfo: string
    isDark: boolean
    currentSize: ElementPlusSize
    sizeMap: ElementPlusSize[]
    mobile: boolean
    theme: ThemeTypes
    fixedMenu: boolean
}

export const useAppStore = defineStore('app', {
    state: (): AppState => {
        return {
            userInfo: 'userInfo', // 登录信息存储字段-建议每个项目换一个字段，避免与其他项目冲突
            sizeMap: ['default', 'large', 'small'],
            mobile: false, // 是否是移动端
            title: import.meta.env.VITE_APP_TITLE, // 标题
            pageLoading: false, // 路由跳转loading

            breadcrumb: true, // 面包屑
            collapse: false, // 折叠菜单
            uniqueOpened: true, // 是否只保持一个子菜单的展开
            hamburger: true, // 折叠图标
            screenfull: true, // 全屏图标
            size: true, // 尺寸图标
            locale: false, // 多语言图标
            message: false, // 消息图标
            tagsView: true, // 标签页
            logo: true, // logo
            fixedHeader: true, // 固定toolheader
            greyMode: false, // 是否开始灰色模式，用于特殊悼念日
            fixedMenu: wsCache.get('fixedMenu') || false, // 是否固定菜单

            layout: wsCache.get(CACHE_KEY.LAYOUT) || 'classic', // layout布局
            isDark: wsCache.get(CACHE_KEY.IS_DARK) || false, // 是否是暗黑模式
            currentSize: wsCache.get('default') || 'default', // 组件尺寸
            theme: wsCache.get(CACHE_KEY.THEME) || {
                // 主题色
                elColorPrimary: '#409eff',
                // 左侧菜单边框颜色
                leftMenuBorderColor: 'inherit',
                // 左侧菜单背景颜色
                leftMenuBgColor: '#001529',
                // 左侧菜单浅色背景颜色
                leftMenuBgLightColor: '#0f2438',
                // 左侧菜单选中背景颜色
                leftMenuBgActiveColor: 'var(--el-color-primary)',
                // 左侧菜单收起选中背景颜色
                leftMenuCollapseBgActiveColor: 'var(--el-color-primary)',
                // 左侧菜单字体颜色
                leftMenuTextColor: '#bfcbd9',
                // 左侧菜单选中字体颜色
                leftMenuTextActiveColor: '#fff',
                // logo字体颜色
                logoTitleTextColor: '#fff',
                // logo边框颜色
                logoBorderColor: 'inherit',
                // 头部背景颜色
                topHeaderBgColor: '#fff',
                // 头部字体颜色
                topHeaderTextColor: 'inherit',
                // 头部悬停颜色
                topHeaderHoverColor: '#f6f6f6',
                // 头部边框颜色
                topToolBorderColor: '#eee'
            }
        }
    },
    getters: {
        getBreadcrumb(): boolean {
            return this.breadcrumb
        },
        getCollapse(): boolean {
            return this.collapse
        },
        getUniqueOpened(): boolean {
            return this.uniqueOpened
        },
        getHamburger(): boolean {
            return this.hamburger
        },
        getScreenfull(): boolean {
            return this.screenfull
        },
        getSize(): boolean {
            return this.size
        },
        getLocale(): boolean {
            return this.locale
        },
        getMessage(): boolean {
            return this.message
        },
        getTagsView(): boolean {
            return this.tagsView
        },
        getLogo(): boolean {
            return this.logo
        },
        getFixedHeader(): boolean {
            return this.fixedHeader
        },
        getGreyMode(): boolean {
            return this.greyMode
        },
        getFixedMenu(): boolean {
            return this.fixedMenu
        },
        getPageLoading(): boolean {
            return this.pageLoading
        },
        getLayout(): LayoutType {
            return this.layout
        },
        getTitle(): string {
            return this.title
        },
        getUserInfo(): string {
            return this.userInfo
        },
        getIsDark(): boolean {
            return this.isDark
        },
        getCurrentSize(): ElementPlusSize {
            return this.currentSize
        },
        getSizeMap(): ElementPlusSize[] {
            return this.sizeMap
        },
        getMobile(): boolean {
            return this.mobile
        },
        getTheme(): ThemeTypes {
            return this.theme
        },
    },
    actions: {
        setBreadcrumb(breadcrumb: boolean) {
            this.breadcrumb = breadcrumb
        },
        setCollapse(collapse: boolean) {
            this.collapse = collapse
        },
        setUniqueOpened(uniqueOpened: boolean) {
            this.uniqueOpened = uniqueOpened
        },
        setHamburger(hamburger: boolean) {
            this.hamburger = hamburger
        },
        setScreenfull(screenfull: boolean) {
            this.screenfull = screenfull
        },
        setSize(size: boolean) {
            this.size = size
        },
        setLocale(locale: boolean) {
            this.locale = locale
        },
        setMessage(message: boolean) {
            this.message = message
        },
        setTagsView(tagsView: boolean) {
            this.tagsView = tagsView
        },
        setLogo(logo: boolean) {
            this.logo = logo
        },
        setFixedHeader(fixedHeader: boolean) {
            this.fixedHeader = fixedHeader
        },
        setGreyMode(greyMode: boolean) {
            this.greyMode = greyMode
        },
        setFixedMenu(fixedMenu: boolean) {
            wsCache.set('fixedMenu', fixedMenu)
            this.fixedMenu = fixedMenu
        },
        setPageLoading(pageLoading: boolean) {
            this.pageLoading = pageLoading
        },
        setLayout(layout: LayoutType) {
            if (this.mobile && layout !== 'classic') {
                ElMessage.warning('移动端模式下不支持切换其他布局')
                return
            }
            this.layout = layout
            wsCache.set(CACHE_KEY.LAYOUT, this.layout)
        },
        setTitle(title: string) {
            this.title = title
        },
        setIsDark(isDark: boolean) {
            this.isDark = isDark
            if (this.isDark) {
                document.documentElement.classList.add('dark')
                document.documentElement.classList.remove('light')
            } else {
                document.documentElement.classList.add('light')
                document.documentElement.classList.remove('dark')
            }
            wsCache.set(CACHE_KEY.IS_DARK, this.isDark)
        },
        setCurrentSize(currentSize: ElementPlusSize) {
            this.currentSize = currentSize
            wsCache.set('currentSize', this.currentSize)
        },
        setMobile(mobile: boolean) {
            this.mobile = mobile
        },
        setTheme(theme: ThemeTypes) {
            this.theme = Object.assign(this.theme, theme)
            wsCache.set(CACHE_KEY.THEME, this.theme)
        },
        setCssVarTheme() {
            for (const key in this.theme) {
                setCssVar(`--${humpToUnderline(key)}`, this.theme[key])
            }
        },
    }
})

export const useAppStoreWithOut = () => {
    return useAppStore(store)
}
